<template>
  <div class="app1-container">
    <el-form ref="froms" :rules="formRules" class="form-inline" :label-position="right" :inline="true" :model="listQuery" size="mini" label-width="80px">
      <el-form-item label="工程编号" prop="productNumberIdentification">
        <el-autocomplete
          v-model="listQuery.productNumberIdentification"
          popper-class="my-autocomplete"
          :fetch-suggestions="queryProductNumberSearch"
          placeholder="请输入工程编号"
          size="small"
          :trigger-on-focus="false"
          @select="handleProductNumberSelect"
          @blur="handleProductNumberBlur"
        >
          <template slot-scope="{ item }">
            <div class="name">{{ item.value = item.identification }}</div>
          </template>
          <el-button slot="append" icon="el-icon-more" @click="handleProductNumberDialog" />
        </el-autocomplete>
      </el-form-item>
      <el-form-item label="图纸编号">
        <el-input v-model="listQuery.drawingIdentification" placeholder="请输入图纸编号" size="small" />
      </el-form-item>
      <el-form-item label="专业" label-width="60px">
        <el-select v-model="listQuery.spection" placeholder="请选择专业" type="text" size="small">
          <el-option label="全部" value="0" />
          <el-option v-for="item in SPECTION_OPTIONS" :key="item.key" :label="item.name" :value="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="中间产品">
        <el-input v-model="listQuery.midProduct" placeholder="请输入中间产品" size="small">
          <el-button slot="append" icon="el-icon-more" @click="handleMidProductDialog" />
        </el-input>
      </el-form-item>
      <el-form-item label="图纸名称">
        <el-input v-model="listQuery.drawingName" placeholder="请输入图纸名称" size="small" />
      </el-form-item>
      <el-form-item label="部门" label-width="60px">
        <el-select v-model="listQuery.department" placeholder="请选择部门" type="text" size="small">
          <el-option label="全部" value="0" />
          <el-option v-for="item in DEPARTMENTS_OPTIONS" :key="item.key" :label="item.name" :value="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="检索下级产品" label-width="110px">
        <el-radio-group v-model="listQuery.nextProduct" size="mini">
          <el-radio border label="是" />
          <el-radio border label="否" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="图纸类型" prop="drawingType" label-width="110px">
        <el-select v-model="listQuery.drawingType" placeholder="请选择图纸类型" type="text" size="small">
          <el-option label="全部" value="0" />
          <el-option v-for="item in TYPES_OPTIONS" :key="item.key" :label="item.name" :value="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="设计发送时间" label-width="110px">
        <el-date-picker
          v-model="listQuery.startEndTime"
          type="daterange"
          align="right"
          class="fr"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="mini"
          :default-time="['00:00:00', '23:59:59']"
          :picker-options="pickerOptions"
          @change="handleStartEndTimeChange"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain size="mini" icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-button type="primary" plain size="mini" icon="el-icon-s-promotion" @click="handleExport">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="drawingTable"
      v-loading="listLoading"
      :data="list"
      style="width: 100%"
      height="350px"
      border
      stripe
      highlight-current-row
    >
      <el-table-column type="index" label="编号" align="center" width="50" />
      <!-- <el-table-column label="图纸编号" prop="identification" align="center" min-width="100" /> -->
      <el-table-column label="图纸名称" prop="name" align="center" min-width="100">
        <template slot-scope="{row}">
          <svg-icon icon-class="pdf" />
          <!--链接 ，单一文件显示链接直接打开浏览-->
          <el-link @click="handleView(row)">{{ row.name }}</el-link>
        </template>
      </el-table-column>
      <!-- <el-table-column label="描述" prop="description" align="center" min-width="100" /> -->
      <el-table-column label="图纸类型" prop="typeName" align="center" min-width="100" />
      <!-- <el-table-column label="版本" prop="revision" align="center" min-width="100" /> -->
      <el-table-column label="工程编号" prop="productNumber" align="center" min-width="100" />
      <el-table-column label="设计发送时间" prop="sendTime" sortable align="center" min-width="135" />
      <el-table-column label="档案接收时间" prop="receiveTime" sortable align="center" min-width="135" />
      <el-table-column label="打印开始时间" prop="printStartTime" sortable align="center" min-width="135" />
      <el-table-column label="打印结束时间" prop="printEndTime" sortable align="center" min-width="135" />
      <!-- <el-table-column label="出图单号" prop="dispatchIdentification" align="center" min-width="100" /> -->
      <el-table-column label="操作" prop="Operate" align="center" min-width="120">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="浏览" placement="bottom">
            <el-button size="mini" circle plain type="primary" icon="el-icon-view" @click="handleView(scope.row)" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="下载" placement="bottom">
            <el-button size="mini" circle plain type="primary" icon="el-icon-download" @click="handleDownload( scope.row)" />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-if="dialogViewerVisible"
      :title="'文件浏览'"
      width="70%"
      top="50px"
      :visible.sync="dialogViewerVisible"
      @close="closeDialogViewer"
    > <iframe
      :src="pdfSrc+ fileUrl"
      width="100%"
      height="500"
    />
    </el-dialog>
    <choose-productNumber ref="chooseProductNumber" @handleProductNumberSelected="handleProductNumberSelected" />
    <choose-midProduct ref="chooseMidProduct" @handleMidProductSelected="handleMidProductSelected" />
  </div>
</template>
<script>
// import JSZip from 'jszip'
import JSZipUtils from 'jszip-utils'
import ChooseProductNumber from '@/views/components/choose-productNumber'
import ChooseMidProduct from '@/views/components/choose-midProduct'
const initProductNumberList = [
  { id: '414', // 文件父id
    identification: 'A0857A', // 文件id
    name: 'T50', // 名称
    isFinished: '否', // 类型 folder为文件夹类型
    isArmed: '否', // 文件大小
    description: '2020-04-21 11:21:37'
  },
  { id: '467', // 文件父id
    identification: 'A0863A', // 文件id
    name: 'A0863A', // 名称
    isFinished: '否', // 类型 folder为文件夹类型
    isArmed: '否', // 文件大小
    description: '2020-05-28 13:27:30'
  },
  { iD: '399', // 文件父id
    identification: 'B4593A', // 文件id
    name: '50t浮台', // 名称
    isFinished: '否', // 类型 folder为文件夹类型
    isArmed: '否', // 文件大小
    description: '2020-06-29 15:29:34'
  }
]
const InitList = [
  {
    identification: '001',
    name: 'CB123',
    description: 'CB12ew3',
    typeName: '图样和技术文档',
    revision: '1.4',
    productNumber: 'T301e5',
    sendTime: '2018/01/09',
    receiveTime: '2018/02/13',
    printStartTime: '2018/02/09',
    printEndTime: '2018/03/09',
    dispatchIdentification: 'T3015-CB1w23'
  },
  {
    identification: '002',
    name: 'CB1424',
    description: 'CB123',
    typeName: '图样和技术文档',
    revision: '1.3',
    productNumber: 'T304315',
    sendTime: '2018/04/05',
    receiveTime: '2018/07/19',
    printStartTime: '2018/04/09',
    printEndTime: '2018/11/09',
    dispatchIdentification: 'T3015-CB123'
  },
  {
    identification: '003',
    name: 'CB125',
    description: 'CB13323',
    typeName: '图样和技术文档',
    revision: '4.1',
    productNumber: 'T3056415',
    sendTime: '2019/03/09',
    receiveTime: '2019/07/19',
    printStartTime: '2019/08/09',
    printEndTime: '2019/11/09',
    dispatchIdentification: 'T3015-CB145623'
  },
  {
    identification: '004',
    name: 'CB12526',
    description: 'CB25123',
    typeName: '图样和技术文档',
    revision: '1.1',
    productNumber: 'T323015',
    sendTime: '2016/04/09',
    receiveTime: '2016/07/19',
    printStartTime: '2016/08/09',
    printEndTime: '2016/11/09',
    dispatchIdentification: 'T3015-CB12523'
  },
  {
    identification: '007',
    name: 'CB3128',
    description: 'CB142523',
    typeName: '图样和技术文档',
    revision: '1.1',
    productNumber: 'T335015',
    sendTime: '2015/07/09',
    receiveTime: '2015/07/19',
    printStartTime: '2015/08/09',
    printEndTime: '2015/11/09',
    dispatchIdentification: 'T3015-CB123'
  },
  {
    identification: '008',
    name: 'CB129',
    description: 'CB12323',
    typeName: '图样和技术文档',
    revision: '1.1',
    productNumber: 'T303415',
    sendTime: '2020/07/09',
    receiveTime: '2020/07/19',
    printStartTime: '2020/08/09',
    printEndTime: '2020/11/09',
    dispatchIdentification: 'T3015-CB1243'
  },
  {
    identification: '010',
    name: 'CB1212',
    description: 'CB1223',
    typeName: '图样和技术文档',
    revision: '3.1',
    productNumber: 'T3016',
    sendTime: '2020/08/09',
    receiveTime: '2020/08/19',
    printStartTime: '2020/08/09',
    printEndTime: '2020/11/09',
    dispatchIdentification: 'T3015-CB123'
  }
]
const SPECTION_OPTIONS = [
  { key: '1', name: '船体标准' },
  { key: '2', name: '电器标准' }
]
const DEPARTMENTS_OPTIONS = [
  { key: '1', name: '分段制造部' }
]
const TYPES_OPTIONS = [
  { key: '1', name: '图样和技术文档' },
  { key: '2', name: '公务通知单' },
  { key: '3', name: '永改单' },
  { key: '4', name: '临改单' }
]

export default {
  name: 'OrderList',
  components: {
    ChooseProductNumber,
    ChooseMidProduct
  },
  data() {
    return {
      pdfSrc: '/static/pdf/web/viewer.html?file=', // Pdf浏览路径
      fileUrl: '', // 浏览文件流路径
      dialogViewerVisible: false, // 是否弹出浏览窗口
      pickerOptions: {
        shortcuts: [{
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近半年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      right: 'right',
      formRules: {// 新建文件夹form规则
        productNumberIdentification: [{ required: true, message: '请输入工程编号', trigger: 'blur' }]
      },
      list: InitList, // 表格初始化数据
      listQuery: {
        productNumberId: '', // 工程编号Id搜索关键字
        productNumberIdentification: '', // 工程编号搜索关键字
        drawingIdentification: '', // 图纸编号搜索关键字
        spection: '', // 专业搜索关键字
        midProduct: '', // 中间产品编号搜索关键字
        midProductId: '', // 中间产品Id搜索关键字
        drawingName: '', // 图纸名称搜索关键字
        department: '', // 部门搜索关键字
        nextProduct: '是', // 是否检索下级产品关键字
        drawingType: '', // 图纸类型搜索关键字
        startEndTime: [], // 设计发送时间
        startEndPrice: [],
        saleUserUuid: '',
        osbAuditStatus: ''
      },
      listLoading: false,
      TYPES_OPTIONS,
      SPECTION_OPTIONS,
      DEPARTMENTS_OPTIONS

    }
  },
  methods: {
    // 清空数据 关闭浏览
    closeDialogViewer() {
      this.dialogViewerVisible = false
      this.fileUrl = ' '
    },
    // 文件下载
    handleDownload(row) {
      // 延迟
      this.listLoading = true
      setTimeout(() => {
        // 文件流地址
        this.fileUrl = '/modelview/model.spd'
        JSZipUtils.getBinaryContent(this.fileUrl, (err, data) => {
          if (err) {
            console.log(err)
            // 关闭loading
            this.listLoading = false
          }
          const blob = new Blob([data]) // 构造一个blob对象来处理数据
          const fileName = 'download.zip' // 导出文件名
          // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
          // IE10以上支持blob但是依然不支持download
          if ('download' in document.createElement('a')) {
          // 支持a标签download的浏览器
            const link = document.createElement('a') // 创建a标签
            link.download = fileName // a标签添加属性
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            document.body.appendChild(link)
            link.click() // 执行下载
            URL.revokeObjectURL(link.href) // 释放url
            document.body.removeChild(link) // 释放标签
          } else { // 其他浏览器
            navigator.msSaveBlob(blob, fileName)
          }
        })
        this.listLoading = false
        this.$message({
          type: 'success',
          message: '下载成功!'
        })
      }, 1000)
    },
    // 文件浏览
    handleView(row) {
      this.fileType = 'pdf'
      this.dialogViewerVisible = true
      // 文件流地址
      this.fileUrl = 'demo.pdf'
    },
    // 中间产品选择弹框
    handleMidProductDialog() {
      this.$refs.chooseMidProduct.handleMidProductDialog()
    },
    // 接收中间产品选择弹框 选择确认后的数据
    handleMidProductSelected(item) {
      alert(item.identification)
      this.listQuery.midProduct = item.identification
      this.listQuery.midProductId = item.id
    },
    // 工程编号选择弹框
    handleProductNumberDialog() {
      this.$refs.chooseProductNumber.handleProductNumberDialog()
    },
    // 接收工程编号选择弹框 选择确认后的数据
    handleProductNumberSelected(item) {
      this.listQuery.productNumberIdentification = item.identification
      this.handleProductNumberSelect(item)
    },
    // 返回工程编号输入建议
    queryProductNumberSearch(queryString, cb) {
      const productNumberLists = initProductNumberList
      const results = queryString ? productNumberLists.filter(this.createStateFilter(queryString)) : productNumberLists
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 1000 * Math.random())
    },
    // createFilter 函数做筛选
    createStateFilter(queryString) {
      return (productNumber) => {
        return (productNumber.identification.indexOf(queryString) === 0)
      }
    },
    // 带输入建议的输入框 聚焦时触发
    handleProductNumberBlur() {
    },
    // 带输入建议的输入框 选择时触发
    handleProductNumberSelect(item) {
      this.listQuery.productNumberId = item.id
    },
    handleStartEndTimeChange() {
      // this.getList()
    },
    handleSearch() {
    // 渲染延时，解决文本框不聚焦问题
      this.listLoading = true
      setTimeout(() => {
        this.listLoading = false
      }, 500)
    },
    handleExport() {
      // 延迟
      this.listLoading = true

      setTimeout(() => {
        // 文件流地址
        this.fileUrl = '/modelview/model.spd'
        JSZipUtils.getBinaryContent(this.fileUrl, (err, data) => {
          if (err) {
            console.log(err)
            // 关闭loading
            this.listLoading = false
          }
          const blob = new Blob([data]) // 构造一个blob对象来处理数据
          const fileName = 'download.zip' // 导出文件名
          // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
          // IE10以上支持blob但是依然不支持download
          if ('download' in document.createElement('a')) {
          // 支持a标签download的浏览器
            const link = document.createElement('a') // 创建a标签
            link.download = fileName // a标签添加属性
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            document.body.appendChild(link)
            link.click() // 执行下载
            URL.revokeObjectURL(link.href) // 释放url
            document.body.removeChild(link) // 释放标签
          } else { // 其他浏览器
            navigator.msSaveBlob(blob, fileName)
          }
        })
        this.listLoading = false
        this.$message({
          type: 'success',
          message: '导出成功!'
        })
      }, 1000)
    }
  }
}
</script>

<style lang="stylus" scoped>
.searchDiv {
  margin-bottom: 10px;
  float: right;
}
</style>
